<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>投诉建议</title>
    <script src="../../../js/header.js"></script>
</head>
<body>
<div id="app" style="overflow: hidden;">
    <el-row type="flex" justify="center">
        <el-col :span="15">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 20px;">
                <el-breadcrumb-item :to="{ path: '/' }"  @click.native="gobackmain()">首页</el-breadcrumb-item>
                <el-breadcrumb-item>外国人来华举报</el-breadcrumb-item>
            </el-breadcrumb>
            <div style="margin-top: 30px;">
                <div style="margin-top: 10px;">
                    <el-form :model="selectForm" ref="selectForm" label-width="150px">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="违法活动记录:" prop="records" label-width="110px">
                                    <el-input v-model="selectForm.records" placeholder="" style=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="投诉人:" prop="name" label-width="110px">
                                    <el-input v-model="selectForm.name" placeholder="" style=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="状态:" prop="appealStatus" label-width="110px">
                                    <el-select v-model="selectForm.appealStatus" placeholder="请选择" style="">
                                    	<!--<el-option label="未提交" value="0"></el-option>-->
                                        <el-option label="待处理" value="1"></el-option>
                                        <el-option label="已处理" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col span="10">
                                <el-form-item label="投诉时间:" label-width="110px">
                                    <el-row>
                                        <el-col span="6" style="width: 180px;">
                                            <el-form-item prop="time1">
                                                <el-date-picker type="date" placeholder="选择日期" @change="changeStartDate" v-model="selectForm.time1"
                                                                value-format="yyyy-MM-dd" style="width: 180px;">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col span="1" style="color: rgb(192, 204, 218);text-align: center;">
                                            <span>至</span>
                                        </el-col>
                                        <el-col span="5">
                                            <el-form-item prop="time2">
                                                <el-date-picker type="date" placeholder="选择日期" @change="changeStartDate" v-model="selectForm.time2"
                                                                value-format="yyyy-MM-dd" style="width: 180px;">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <div style="float: right;">
                                    <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="searchForm('selectForm')">查询</el-button>
                                    <el-button type="warning" size="small" style="width: 60px;height: 30px;" @click="resetForm('selectForm')">重置</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>

            <!--展示列表-->
            <el-table :data="tableData" border style="width: 100%;margin-top: 35px;"  @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column type="selection" ></el-table-column>
                <el-table-column
                        type="index"
                        label="序号"
                        width="60" align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="投诉人"
                        width="110"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="creatTime"
                        label="投诉时间"
                        width="140"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="appealStatus"
                        label="状态"
                        width="110"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.appealStatus==0" style="color:#F19437;">未提交</span>
						<span v-if="scope.row.appealStatus==1" style="color:#20A0FF;">待处理</span>
						<span v-if="scope.row.appealStatus==2" style="color:#67C23A;">已处理</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="records"
                        label="违法活动记录"
                        width="350"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="commentCode"
                        label="是否有附件"
                        width="120"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width=""
                        align="center">
                    <template slot-scope="scope">
                		<el-button size="mini" @click="view(scope.$index,scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="overflow: hidden;">
                <div class="pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10]"
                            :page-size="pagesize"
                            background
                            layout="total, sizes,prev, pager, next"
                            :total="tableTotal"
                            prev-text="上一页"
                            next-text="下一页">
                    </el-pagination>
                </div>
            </div>
            <el-button type="primary" size="mini" @click="appovalExByIds()" style="margin-left: 20px;float: right;">导出</el-button>
            <el-button type="primary" size="mini" @click="appovalEx()" style="float: right;">批量导出</el-button>


            <!--添加、详情-->
            <el-dialog title="" :visible.sync="dialogView" center fullscreen>
                <wgr-complaint :wgr-form="addForm" :add-form="showadd" :edit-form="showedit" :form-disabled="showdisabled" :name-disabled="namediabled" :com-link="link"  @cancel="cancel"></wgr-complaint>
            </el-dialog>
        </el-col>
    </el-row>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        created: function () {
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.name = userInfo.loginName;
        },
        data: function () {
            return {
                currentPage: 1,
                pagesize: 10,
                tableTotal:'',
                tableData: [],
                selectFormDisabled:false,
                selectForm: {
                    records: '',
                    name: '',
                    time1: '',
                    time2: '',
                    appealStatus: ''
                },
                Form: {
                    records: '',
                    name: '',
                    time1: '',
                    time2: '',
                    appealStatus: ''
                },
                dialogView:false,
                from:'',
                addForm: {
                    id:"",
                    name: "",
                    sex: "",
                    phone:"",
                    province: '',
                    cities: '',
                    county: '',
                    random: '',
                    creatTime: "",
                    appealContent: "",
                    records:""
                },
                addFormDisabled:false,
                uuid:'',
                link:'',//iframe链接
                showadd: false,
                showedit: false,
                showdisabled: false,
                namediabled: true,
                exportList:[]
            }
        },
        mounted: function () {
            this.getData();
        },
        methods: {
            getData() {
                var pagesize = this.pagesize;
                var pageno = this.currentPage;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/compaint/selectAllPage',
                    params: {
                        pageSize: pagesize,
                        pageNo: pageno,
                        records: this.Form.records,
                        name: this.Form.name,
                        appealStatus: this.Form.appealStatus,
                        startTime: this.Form.time1,
                        endTime: this.Form.time2
                    }
                })
                .then(response => {
                    let data = response.data;
                    if (data.code == 200) {
                        console.log(data);
                        let dataInformation = response.data.data.results;
                        this.tableTotal = response.data.data.total;// 数据长度
                        this.tableData = dataInformation;
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            /* 列表页搜索 */
            searchForm(selectForm) {
                var pagesize = this.pagesize;
                this.currentPage = 1;
                var pageno = this.currentPage;
                this.Form=  JSON.parse(JSON.stringify(this.selectForm));
                axios({
                    method: 'get',
                    url:  appBaseUrl + '/compaint/selectAllPage',
                    params: {
                        pageSize: pagesize,
                        pageNo: pageno,
                        records: this.Form.records,
                        name: this.Form.name,
                        appealStatus: this.Form.appealStatus,
                        startTime: this.Form.time1,
                        endTime: this.Form.time2
                    }
                })
                    .then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    console.log(data);
                    let dataInformation = response.data.data.results;
                    this.tableTotal = response.data.data.total;// 数据长度

                    this.tableData = dataInformation;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            /* 列表页重置 */
            resetForm(formName) {
                this.selectForm.records = '';
                this.selectForm.name = '';
                this.selectForm.time1 = '';
                this.selectForm.time2 = '';
                this.selectForm.appealStatus = '';
                this.Form.records = '';
                this.Form.name = '';
                this.Form.time1 = '';
                this.Form.time2 = '';
                this.Form.appealStatus = '';
                this.currentPage = 1;
                this.getData();
            },
            // 判断开始时间是否大于结束时间
			changeStartDate() {
				if(this.selectForm.time1 != "" && this.selectForm.time2 != "") {
					if(this.selectForm.time1 > this.selectForm.time2) {
                        this.$message.error("开始日期必须小于等于结束日期");
                        return;
					}
				}
			},
            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.getData();
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.getData();
            },
            // 关闭dialog
            cancel(){
                this.dialogView = false;
                this.getData();
            },
            //获取UUID的方法
            getUuid() {
                axios({
                    method: 'get',
                    url: appBaseUrl + '/uuid/getUuid',
                })
                .then(response => {
                    console.log(response);
                    if (response.data.code == 200) {
                        this.uuid = response.data.data;
                        this.link="upload/annex2.html?uuid="+this.uuid+"&flag=1";
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //查看
            view(index,row){
                this.dialogView=true;
                this.addFormDisabled=true;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/compaint/getappeal',
                    params: {
                        id: row.id
                    }
                })
                .then(response => {
                	console.log(response)
                    let data = response.data;
                    if (data.code == 200) {
                      	let rowdata = response.data.data;
                        this.showadd = false;
                        this.showedit = false;
                        this.showdisabled = true;
                      	this.addForm = rowdata;
                        this.link = appBaseUrl + "/html/upload/annex2.html?uuid="+row.id+"&flag=0&from="+row.from;
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
           /*返回首页*/
            gobackmain(){
                parent.mainwork.backIndex();
            },
            //批量导出
            appovalEx(){
                this.$confirm('确定要批量导出吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    window.location.href="/dzjportal/compaint/export?name="+this.selectForm.name+"&appealStatus="
                        +this.selectForm.appealStatus+"&startTime="+this.selectForm.time1+"&endTime="+this.selectForm.time2;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消导出'
                    });
                });
            },
            handleSelectionChange(val) {
                this.exportList = val;
            },
            //导出
            appovalExByIds(){
                if(this.exportList.length >0){
                    this.ids = this.exportList.map(function(exportList,index){
                        return exportList.id;
                    }).join(",");
                    this.$confirm('确定要导出所选数据吗?', '提示', {
                        cancelButtonText: '取消',
                        confirmButtonText: '确定',
                        type: 'warning'
                    }).then(() => {
                        window.location.href="/dzjportal/compaint/exportByIds?ids="+this.ids
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消导出'
                        });
                    });
                }else {
                    this.$message('请选择要导出的数据！');
                }
            }

        },
    })
</script>
</html>